<template>

  <div class="user-edit-container">
    <!-- Header 区域 -->
    <van-nav-bar
      title="编辑资料"
      left-arrow
      fixed
      placeholder
      @click-left="onClickLeft"
    />
    <!-- 用户资料 -->
    <van-cell-group class="action-card">
      <van-cell
        title="头像"
        is-link
        center
      >
        <!-- 头像 -->
        <template #default>
          <van-image
            round
            class="avatar"
            :src="obj.photo"
            @click="$refs.iptFile.click()"
          ><input
              type="file"
              ref="iptFile"
              v-show="false"
              accept="image/*"
              @change="onFileChange"
            /></van-image>

        </template>

      </van-cell>
      <van-cell
        title="名字"
        is-link
        :value="obj.name"
        @click="nameRevise"
      >
      </van-cell>
      <!-- 名字 -->
      <van-dialog
        v-model="show1"
        title="修改用户名"
        show-cancel-button
        getContainer='body'
        @confirm='sendNme'
      >
        <van-cell-group>
          <van-field
            v-model="value"
            placeholder="请输入你的名字"
          />
        </van-cell-group>
      </van-dialog>
      <!-- 性别 -->
      <van-cell
        title="性别"
        is-link
        :value="obj.gender"
      />
      <van-cell
        title="生日"
        is-link
        :value="obj.birthday"
        @click="show=!show"
      >
      </van-cell>
      <!-- 生日 -->
      <van-popup
        v-model="show"
        position="bottom"
        :style="{ height: '30%' }"
      >
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          title="选择年月日"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm='sendTIme(currentDate)'
          @cancel='show=!show'
        />
      </van-popup>
    </van-cell-group>
  </div>

</template>

<script>
import { setModification, updatePersonalInformation, setAvatar } from "@/api/my.js";
import moment from 'moment'
import { Dialog } from 'vant';
//导入局部组件必须在scrip里面导入,在App里面导入
export default {
  // 组件名称
  name: 'Mydel',
  // 组件参数 接收来自父组件的数据
  props: {},
  // 接收局部注册的组件
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
  // 组件数据
  data () {
    return {
      obj: {},
      show: false,
      value: '',//名字
      show1: false,//名字
      minDate: new Date(1949, 1, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(2021, 0, 17),
    }
  },
  created () {
    this.setData()
    // console.log(arr.data.data);
  },
  methods: {
    onClickLeft () {
      this.$router.push({
        path: '/layout/my'
      })
    },
    // 修改生日
    async sendTIme (val) {
      this.show = !this.show
      //   console.log(val);
      //   要修改的时间
      let time = moment(val).format('YYYY-MM-DD')
      //   向后台传递时间
      let arr = await updatePersonalInformation({ birthday: time })
      this.obj.birthday = JSON.parse(arr.config.data).birthday

    },
    //封装用户资料
    async setData () {
      let arr = await setModification()
      this.obj = arr.data.data
    },
    //修改名字弹窗
    nameRevise () {
      this.show1 = !this.show1
    },
    //修改名字
    async sendNme () {
      // console.log(this.value);
      //   向后台传递姓名
      let arr = await updatePersonalInformation({ name: this.value })
      this.obj.name = JSON.parse(arr.config.data).name
      this.value = ''
    },
    //修改头像
    async onFileChange (ev) {
      // 此时可以自行将文件上传至服务器

      if (ev.target.files.length === 0) return
      const fd = new FormData()
      fd.append('photo', ev.target.files[0])
      let arr = await setAvatar(fd)
      // console.log(arr.data.data.photo);
      this.obj.photo = arr.data.data.photo
      // this.setData()
    },
  }
}
</script>

<style lang="less" scoped>
.user-edit-container {
  padding-top: 46px;
  .avatar {
    width: 50px;
    height: 50px;
  }
}
</style>